{% extends 'base.html'%}
{% load static %}

{% block title %}
    <title>教务管理</title>
{% endblock %}

{% block head_extras %}
<style type="text/css">
    .row{
        margin-top: 1%;
        margin-left: 0.5%;
        margin-right: 0.5%;
    }
    td ,th{
        vertical-align: middle;
        text-align: center;
    }
    thead{
        background-color: #7fdfd4;
        color:#eeeeee;
        font-size: 15px;
    }
    .table td{
        color:#777777;
        font-size:15px;
        height: 60px;
        width: 1000px;
        background-color:#fafaf6;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>课程名</th>
                    <th>课程代码</th>
                    <th>课程序号</th>
                    <th>课程类别</th>
                    <th>学年学期</th>
                    <th>总分</th>
                    <th>学分</th>
                    <th>期中考试比例</th>
                    <th>期末考试比例</th>
                    <th>平时成绩比例</th>
                    <th>实验成绩比例</th>
                </tr>
            </thead>
            <tbody>
                {% for course in courses %}
                <tr class='course_data'>
                    <td><a href='/useraccount/course_detail/{{course.id}}/'>{{ course.name }}</a></td>
                    <td>{{ course.code }}</td>
                    <td>{{ course.numbering }}</td>
                    <td>{{ course.category }}</td>
                    <td>{{ course.school_term }}</td>
                    <td>{{ course.total_score }}</td>
                    <td>{{ course.credit }}</td>
                    <td>{{ course.midterm }}</td>
                    <td>{{ course.final_exam }}</td>
                    <td>{{ course.usual }}</td>
                    <td>{{ course.experimental }}</td>
                </tr>
                <tr class='desc' hidden>
                    <td>备注：<td>
                    <td colspan="8">{{ course.desc }}<td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
{% block js_extras %}
    <script type="text/javascript">
        $('#courses').addClass('active');
    </script>
    <script type="text/javascript">
        $('.course_data').click( function() {
            var desc = $(this).next('.desc');
            if (desc.is(':hidden')){
                desc.show()
            }
            else{
                desc.hide()
            }
    });
    </script>
{% endblock %}